<template>
  <div class="account">
    <form>
      <div class="form_group account_bar">
        <i class="account_icon"> </i>
        <input
          type="text"
          placeholder="请输入账号"
          maxlength="11"
          v-model="account"
        />
      </div>
      <div class="form_group psw_bar">
        <i class="psw_icon"> </i>
        <input type="password" placeholder="请输入密码" v-model="password" />
      </div>
    </form>
    <div class="wang_psw" @click="changePsw">    忘记密码</div>

    <div class="loginBtn" @click="getLoginCount">登录</div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import { post } from "@/utils/request.js";
import config from "@/utils/config.js";
 import {Debounce,Throttle} from "@/utils/tools";
import { mapActions, mapMutations, mapState } from "vuex";

export default {
  name: "AccountLogin",
  data() {
    return {
      account: "",
      password: "",
    };
  },
  computed: {
    // 映射了login模块的state
    ...mapState(["login"]),
  },
  methods: {
    ...mapActions("login", ["getUserInfo"]),
    getLoginCount() {
      let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      if (this.account.length == 0 || this.password.length == 0) {
        Toast("账号或密码不能为空");

        return;
      } else {
        if (!reg.test(this.account)) {
          Toast("请输入正确的手机号");
          return;
        }
        if (this.password.length < 5 || this.account.length > 16) {
          Toast("密码长度为5-16位");
          return;
        }
      }

      let url = "api/login";
      let _this = this;
      let pro = axios
        .post(url, {
          account: this.account,

          password: this.password,
        })
        .then((response) => {
          let { status, msg, data } = response.data;
          // console.log(data)
          if (status == 400) {
            // toast
            Toast.fail("账号或密码错误");
          } else {
            // 这是模块
            this.$store.commit("login/saveToken", data.token);
            this.getUserInfo();
            // this['login/saveToken'](data.token)
            // _this.saveToken(data.token)
            
            // console.log(msg);

            Dialog.alert({
              message: "登录成功",
            }).then(() => {
              this.$router.push("/user");
            });
          }
        })
        .catch((err) => {
          Toast.fail("操作失败");
        });
    },
    getLoginCount1() {
      let url = config.host + "api/login";
      post(url, {
        account: this.account,
        password: this.password,
      }).then(
        (res) => {
          console.log(res);
        },
        (err) => {
          console.log("错误");
        }
      );
    },

    clickLoginCount:Debounce(function(){
      this.getLoginCount()
    },300),

    changePsw(){
      this.$router.push('/psw')
    }
    
  },
};
</script>

<style lang="scss" scoped>
.form_group {
  height: 50px;
  // padding: 15.5px 0 0 33px;
  border-bottom: 1px solid #ededed;
  position: relative;
  > input {
    position: absolute;
    top: 23px;
    left: 33px;
    height: 20px;
    width: 240px;
    // background: pink;
    outline: none;
    border: 0;
    color: #333;
    font-size: 16px;
  }
  > i {
    position: absolute;
    left: 10px;
    bottom: 7px;
    display: block;
    width: 18px;
    height: 18px;
  }
  .account_icon {
    background: url(../../assets/icon/login/phone.svg) no-repeat;
    background-size: 100% 100%;
  }
  .psw_icon {
    background: url(../../assets/icon/login/psw.svg) no-repeat;
    background-size: 100% 100%;
  }
}
.wang_psw {
  margin-top: 8px;
  text-align: right;
  font-size: 14px;
  color: #666;
  &::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(../../assets/icon/login/wen.svg) no-repeat;
    background-size: 100% 100%;
    // margin-right: 5px;
  }
}
.loginBtn {
  height: 43px;
  line-height: 43px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;

  border-radius: 21.5px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f35447),
    to(#ff8e3c)
  );
  background: linear-gradient(90deg, #f35447 0, #ff8e3c);
  background: -moz-linear-gradient(to right, #f35447 0, #ff8e3c 100%);
  text-align: center;

  margin-top: 20px;
}
</style>